<template>
  <div v-loading="listLoading"  class="createPost-container">

    <el-form ref="postForm" :model="postForm" label-width="80px">

      <div class="createPost-main-container" style="width:600px;">
        <el-form-item v-if="isEdit" label="编号">
          <el-input v-model="postForm.id" disabled></el-input>
        </el-form-item>

        <el-form-item label="用户编号">
          <el-input v-model="postForm.Code" placeholder="请输入用户编号" :disabled="isEdit"></el-input>
        </el-form-item>

        <el-form-item label="用户名称">
          <el-input v-model="postForm.Name" placeholder="请输入用户名称" ></el-input>
        </el-form-item>

        <el-form-item label="用户组">
          <el-select v-model="postForm.U_BOUSG" placeholder="请选择">
            <el-option
              v-for="item in BOUSGs"
              :key="item.Code"
              :label="item.Name"
              :value="item.Code">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="backtoPreviousTags(false)">取消</el-button>
        </el-form-item>
      </div>
    </el-form>

  </div>
</template>

<script>
import axios from 'axios'
import { fetchBOUSRs, fetchBOUSGs, updateBOUSRs } from '@/api/res'

const defaultForm = {
  status: 'draft',
  MEQG_Name: '',
  U_MEQG:'',
  Code: '',
  Name: '',
  U_VisOrder: '',
  Canceled: '',
  DocEntry:'',
  id: undefined,
  isUsed: false
}

export default {
  name: 'ResDetail',
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    const validateRequire = (rule, value, callback) => {
      console.log('-------validateRequire-----------',rule,value)
      if (value === '') {
        this.$message({
          message: rule.field + '为必传项',
          type: 'error'
        })
        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
    }

    return {
      postForm: Object.assign({}, defaultForm),
      loading: false,
      listLoading: true,
      rules: {
      },
      tempRoute: {},
      isUsed: 1,
      opers:[],
      BOUSGs:[]
    }
  },
  created() {
    if (this.isEdit) {
      const id = this.$route.params && this.$route.params.id
      this.fetchData(id)
    }else{
      this.postForm.U_Pwd = '1234'
    }

    this.listLoading = false
    this.tempRoute = Object.assign({}, this.$route)

    fetchBOUSGs({ page:1, limit:200}).then(res=>{
       const {flist} = res
       this.BOUSGs = flist
    })
  },
  methods: {
    onSubmit(){
      console.log('Submit',JSON.stringify(this.postForm))
    },

    backtoPreviousTags(reflush){
      const title = 'Edit Course'
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
      this.$store.dispatch('tagsView/delView', route).then(({ visitedViews }) => {
        const latestView = visitedViews.slice(-1)[0]
        console.log('latestView--------------',latestView)
        if (latestView) {
          this.$router.push(latestView.fullPath)
          if(reflush && reflush == true){
            this.$router.go(0)
          }
        } else {
          if (view.name === 'Dashboard') {
            this.$router.replace({ path: '/redirect' + view.fullPath })
          } else {
            this.$router.push('/')
          }
        }
      })
    },

    fetchData(id) {
      this.listLoading = true
      fetchBOUSRs({ page:1,limit:2000}).then(resData=>{
        var _list = resData.flist.filter(v => v.DocEntry == id ).map(item=>{
          item.id = item.DocEntry
          return item
        })

        this.postForm = JSON.parse(JSON.stringify(_list))[0];

        this.setTagsViewTitle()
        this.setPageTitle()

        this.listLoading = false
      }).catch(err=> {
        console.log('error submit!!',err);
        this.listLoading = false
      });

    },
    setTagsViewTitle() {
      const title = '用户编辑'
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.DocEntry}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = '用户编辑'
      document.title = `${title} - ${this.postForm.DocEntry}`
    },

    submitForm() {
      console.log(this.postForm)
      if (this.postForm.U_BOUSG.length === 0) {
        this.$message({
          message: '请填写用户组',
          type: 'warning'
        })
        return
      }

      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true

          var _tables = ''
          if (this.isEdit){
            _tables = '<BOUSR><Name>'+this.postForm.Name+'</Name><U_BOUSG>'+this.postForm.U_BOUSG+'</U_BOUSG></BOUSR>'
          }else{
            _tables = '<BOUSR><Code>'+this.postForm.Code+'</Code><Name>'+this.postForm.Name+'</Name><U_BOUSG>'+this.postForm.U_BOUSG+'</U_BOUSG></BOUSR>'
          }
          
          updateBOUSRs(this.postForm).then(res=>{
            
              console.log(res);
            
              this.$notify({
                title: '成功',
                message: '提交成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.backtoPreviousTags(true)
          }).catch(err=>{
            console.log('error submit!!',err);
            this.loading = false
            return false
          })

        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 40px 45px 20px 50px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea ::v-deep {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}

// .avatar{
//   width: 200px;
//   height: 200px;
//   border-radius: 50%;
// }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

</style>
